<template>
    <div class="background-wrap">

        <!-- 背景 -->
        <div class="background-body" v-if="store.background.state">
            <div class="background-img" :class="styleImg.show ? 'show-img' : ''" :style="styleImg"></div>
        </div>

        <!-- 屏保 -->
        <div class="background-screen-saver" v-if="screenSaver.state">
            <div class="screen-saver-body no-select" :class="screenSaver.show ? 'show' : ''" @click="gotoDesktop"
                 @mousewheel="gotoDesktop">
                <div class="screen-saver-img" :style="screenSaverImg"></div>
                <div class="screen-saver-box">
                    <div class="time-wrap">
                        <span class="time-value">{{screenSaver.time}}</span>
                        <span class="time-ampm">{{screenSaver.ampm}}</span>
                    </div>
                    <div class="date-wrap">{{screenSaver.date}} {{screenSaver.week}}</div>
                    <div class="weather-wrap" v-if="screenSaver.weather.img && screenSaver.weather.text">
                        <div class="weather-body">
                            <div class="weather-img">
                                <img :src="screenSaver.weather.img" alt=""/>
                            </div>
                            <div class="weather-text">{{screenSaver.weather.text}}</div>
                        </div>
                        <div class="temperature-body">
                            <div class="temperature-value">{{screenSaver.weather.temperature}}</div>
                            <div class="temperature-range">{{screenSaver.weather.temperatureRange}}</div>
                        </div>
                    </div>
                    <div class="tips-wrap">
                        <icon-font type="icon-mouse" class="tips-icon"/>
                        <div class="tips-text">滚动或单击</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 锁屏 -->
        <div class="background-lock" v-if="store.lock == 'lock'">
            <div class="lock-body no-select show">
                <div class="lock-img" :style="screenSaverImg"></div>
                <div class="lock-box">
                    <div class="lock-logo">
                        <img
                                class="lock-logo-img"
                                :src="(store.userInfo && store.userInfo.headImg) ? store.userInfo.headImg : website.logo"
                                alt=""
                        />
                        <div class="lock-logo-text text-elip">
                            {{(store.userInfo && store.userInfo.nickname) ? store.userInfo.nickname : website.title}}
                        </div>
                    </div>
                    <div class="lock-input-body">
                        <a-input
                                class="password-wrap"
                                type="password"
                                placeholder="输入密码"
                                v-model:value="lock.form.password"
                                @pressEnter="onUnLock"
                        ></a-input>
                        <div class="password-tips" v-if="site.passwordTips">{{site.passwordTips}}</div>
                    </div>
                    <div class="lock-btn-body">
                        <a-button type="primary" shape="circle" @click="onUnLock">
                            <template #icon>
                                <ArrowRightOutlined/>
                            </template>
                        </a-button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {account, appUrl} from "/src/config/env";
    import {createVNode} from "vue";
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {clearStorage, getConfig, getFormatDateTime, goUrl, sendMsgToExtension} from "/src/util";

    // iconfont
    import {createFromIconfontCN, ArrowRightOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue';

    const IconFont = createFromIconfontCN({scriptUrl: website.iconfontUrl});

    import {index as getIp} from '/src/request/api/ip';
    import {data as getWeather} from '/src/request/api/weather';

    export default {
        name: "Background",
        // 组件
        components: {
            IconFont,
            ArrowRightOutlined,
        },
        // 数据
        data() {
            return {
                website: website,
                site: getConfig('site') || {},
                // vuex 状态
                store: useStore().state,
                styleImg: null,
                screenSaverImg: null,
                // 屏保
                screenSaver: {
                    state: false,
                    show: false,
                    date: '',
                    time: '',
                    ampm: '',
                    week: '',
                    weather: {
                        img: 'https://images.yi-ja.com/weather/white/0@1x.png',
                        text: '',
                        temperature: '',
                        temperatureRange: '',
                    },
                    lId: '',

                    count: 0,
                    x: '',
                    y: '',
                },
                // 锁屏
                lock: {
                    form: {
                        account: account,
                        password: '',
                    }
                },
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
            this.monitorMouse();
        },
        // 方法
        methods: {
            // 初始化
            init() {
                let that = this,
                    background = that.store.background;
                that.setBackgroundImage(background);
                that.$store.commit('setEvent', false);
            },
            // 设置背景图片
            setBackgroundImage(background) {
                let that = this;
                // 壁纸库
                if (background.value == 'main') {
                    let row = background[background.value],
                        url = row.value || row.dft;

                    that.styleImg = {
                        show: true,
                        backgroundImage: "url(" + url + ")",
                        filter: "blur(" + row.filter + "px)",
                    };
                    that.screenSaverImg = {
                        backgroundImage: "url(" + url + ")",
                    };
                    setTimeout(function () {
                        that.styleImg.show = false;
                    }, 300);
                }
                // 纯色
                else if (background.value == 'pure') {
                    let row = background[background.value];
                    that.styleImg = {
                        backgroundColor: row.value || row.dft,
                    };
                    that.screenSaverImg = {
                        backgroundColor: row.value || row.dft,
                    };
                }
                that.$store.commit('setBackground', background);
            },
            // 监听鼠标
            monitorMouse() {
                let that = this;
                document.onmousemove = event => {
                    let x1 = event.clientX;
                    let y1 = event.clientY;
                    if (that.screenSaver.x != x1 || that.screenSaver.y != y1) {
                        that.screenSaver.count = 0;
                    }
                    that.screenSaver.x = x1;
                    that.screenSaver.y = y1;
                };
                setInterval(this.timeGoToScreenSaver, 1000);
            },
            // 定时进入屏保
            timeGoToScreenSaver() {
                let that = this;
                that.screenSaver.count++;
                if (that.screenSaver.count == (that.site.screenSaverTime || 1) * 60 && that.store.lock == 'open') {
                    that.getWeather();
                    that.gotoScreenSaver();
                }
            },
            // 进入屏保
            gotoScreenSaver() {
                console.log('gotoScreenSaver');
                let that = this;
                that.$store.commit('openSettingPanel', false);
                that.getDate();
                that.getAmPm();
                that.getWeek();
                that.getTime();
                that.loopTime();
                that.screenSaver.state = true;
                setTimeout(function () {
                    that.screenSaver.show = true;
                }, 500);
            },
            // 循环时间
            loopTime() {
                let that = this;
                that.screenSaver.lId = setInterval(function () {
                    that.getTime();
                    // am转pm
                    if (that.screenSaver.time == "13:00:01") {
                        that.getAmPm();
                    }
                    // 今天转明天
                    if (that.screenSaver.time == "00:00:01") {
                        that.getAmPm();
                        that.getDate();
                        that.getWeek();
                    }
                }, 1000);
            },
            // 获取时间
            getTime() {
                this.screenSaver.time = getFormatDateTime(new Date(), 'time');
            },
            // 获取ampm
            getAmPm() {
                this.screenSaver.ampm = getFormatDateTime(new Date(), 'ampm');
            },
            // 获取日期
            getDate() {
                this.screenSaver.date = getFormatDateTime(new Date());
            },
            // 获取星期
            getWeek() {
                this.screenSaver.week = getFormatDateTime(new Date(), 'week');
            },
            // 进入桌面
            gotoDesktop() {
                console.log('gotoDesktop');
                let that = this;
                that.screenSaver.show = false;
                that.loopTimeClear();
                setTimeout(function () {
                    that.screenSaver.state = false;
                    that.screenSaver.count = 0;
                }, 500);
            },
            // 清理时间
            loopTimeClear() {
                let that = this;
                if (that.screenSaver.lId) {
                    clearInterval(that.screenSaver.lId);
                    that.screenSaver.lId = null;
                }
            },
            // 获取天气
            getWeather() {
                let that = this;
                getIp().then(rps => {
                    getWeather({
                        city: rps.data.City,
                    }).then(res => {
                        console.log('getWeather', res);
                        let realtime = res.data.realtime;
                        let future = res.data.future[0];
                        let img = "https://images.yi-ja.com/weather/white/" + parseInt(realtime.wid) + "@1x.png";
                        that.screenSaver.weather = {
                            img: img,
                            text: realtime.info,
                            temperature: realtime.temperature + "℃",
                            temperatureRange: future.temperature,
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                }).catch(err => {
                    console.log(err);
                })
            },
            // 解锁
            onUnLock() {
                let that = this,
                    data = that.lock.form,
                    userInfo = that.store.userInfo;

                if (userInfo && userInfo.account) {
                    data.account = userInfo.account;
                }
                if (!data.account) {
                    that.$message.warning('缺少账号');
                    return false;
                }
                if (!data.password) {
                    that.$message.warning('请输入密码');
                    return false;
                }

                // 登录
                that.$store.dispatch('login', data).then(rps => {
                    let msg = rps.msg || website.msg.success,
                        token = rps.token;
                    that.$message.success(msg);

                    that.$store.commit('setLock', false);
                    that.lockInputClear();

                    sendMsgToExtension('login', token, res => {
                        console.log('sendMsgToExtension', res);
                        if (res.type == 'login_success') {
                            that.$message.success(res.msg || website.msg.success);
                        }
                    });

                    // 用户信息
                    that.$store.dispatch('getInfo').then(res => {
                        // 插件通信
                        sendMsgToExtension('info', res.info);
                    });

                    // 导航页Key
                    that.$store.dispatch('getKey').then(res => {
                        // 插件通信
                        sendMsgToExtension('key', res.key);
                    }).catch(err => {
                        that.$store.dispatch('out');
                        that.$confirm({
                            icon: createVNode(ExclamationCircleOutlined),
                            title: '提醒',
                            content: err.msg,
                            okText: '是',
                            cancelText: '否',
                            onOk() {
                                goUrl(appUrl);
                            },
                            onCancel() {
                            },
                        });
                    });
                }).catch(err => {
                    that.$message.error(err.msg || website.msg.error);
                    that.lockInputClear();
                })
            },
            // 清理锁屏输入框
            lockInputClear() {
                this.lock.form.password = '';
            },

        },
        watch: {
            // 事件监听器
            '$store.state.event'(val) {
                // 切换背景事件
                if (val == 'next') {
                    let that = this,
                        background = that.store.background,
                        random = Math.floor(Math.random() * 10);

                    background[background.value].value = "http://images.yi-ja.com/wallpaper/" + ((random < 10) ? ("0" + random) : random) + ".jpg";

                    that.setBackgroundImage(background);
                    that.$store.commit('setEvent', false);
                }
                // 重新初始化
                else if (val == 'init') {
                    this.init();
                }
            },
        },
    }
</script>

<style lang="less" scoped>
    @radius: 6px;
    @bgColor: #f5f5f5;

    .background-wrap {
        position: relative;
        height: 100%;
        background-color: @bgColor;

        /* 背景 */

        .background-body {

            .background-img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: @bgColor;
                background-position: 50%;
                background-size: cover;
                background-repeat: no-repeat;
                transition: all .3s;
                opacity: 1;
            }
        }

        /* 屏保 */

        .background-screen-saver {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            color: white;
            z-index: 10;

            .screen-saver-body {
                width: 100vw;
                height: 100vh;
                position: relative;
                top: -1500px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                transition: all .5s;
                cursor: pointer;

                &.show {
                    top: 0;
                }

                .screen-saver-img {
                    position: absolute;
                    top: -50px;
                    right: -50px;
                    bottom: -50px;
                    left: -50px;
                    background-color: @bgColor;
                    background-position: 50%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-filter: blur(35px);
                    -moz-filter: blur(35px);
                    -o-filter: blur(35px);
                    -ms-filter: blur(35px);
                    filter: blur(35px);
                    z-index: -1;
                }

                .screen-saver-box {
                    z-index: 2;

                    .time-wrap {
                        width: 355px;
                        height: 80px;
                        display: flex;

                        .time-value {
                            height: 80px;
                            line-height: 80px;
                            font-size: 80px;
                            flex: 1;
                            text-align: left;
                        }

                        .time-ampm {
                            height: 80px;
                            font-size: 20px;
                            width: 35px;
                            text-align: center;
                        }
                    }

                    .date-wrap {
                        margin-top: 20px;
                        font-size: 20px;
                    }

                    .weather-wrap {
                        display: flex;
                        align-items: center;
                        width: 160px;
                        margin: 50px auto 0 auto;

                        .weather-body {
                            flex: 1;

                            .weather-img {
                                height: 50px;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                img {
                                    width: 50px;
                                }
                            }

                            .weather-text {
                                font-size: 14px;
                                height: 20px;
                            }
                        }

                        .temperature-body {
                            flex: 1;

                            .temperature-value {
                                font-size: 30px;
                                height: 50px;

                            }

                            .temperature-range {
                                font-size: 14px;
                                height: 20px;
                            }
                        }
                    }

                    .tips-wrap {
                        margin-top: 200px;

                        .tips-icon {
                            color: white !important;
                            font-size: 40px;
                        }

                        .tips-text {
                            margin-top: 10px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }

        /* 锁屏 */

        .background-lock {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            color: white;
            z-index: 20;

            .lock-body {
                width: 100vw;
                height: 100vh;
                position: relative;
                top: -1500px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                transition: all .5s;

                &.show {
                    top: 0;
                }

                .lock-img {
                    position: absolute;
                    top: -50px;
                    right: -50px;
                    bottom: -50px;
                    left: -50px;
                    background-color: @bgColor;
                    background-position: 50%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-filter: blur(35px);
                    -moz-filter: blur(35px);
                    -o-filter: blur(35px);
                    -ms-filter: blur(35px);
                    filter: blur(35px);
                    z-index: -1;
                }

                .lock-box {
                    position: relative;
                    background-color: #404040;
                    padding: 10px;
                    border-radius: @radius;
                    opacity: .9;
                    width: 300px;
                    height: 170px;

                    .lock-logo {
                        position: absolute;
                        top: -60px;
                        left: 0;
                        width: 100%;
                        padding: 0 10px;

                        .lock-logo-img {
                            border-radius: @radius;
                            width: 100px;
                            height: 100px;
                            object-fit: cover;
                            background-color: #f5f5f5;
                        }

                        .lock-logo-text {
                            margin-top: 20px;
                            font-size: 16px;
                        }
                    }

                    .lock-input-body {
                        padding: 10px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;

                        .password-wrap {
                            border-radius: @radius;
                            text-align: center;
                        }

                        .password-tips {
                            font-size: 12px;
                            color: white;
                            text-align: center;
                            margin-top: 6px;
                        }
                    }

                    .lock-btn-body {
                        height: 32px;
                        position: absolute;
                        bottom: -40px;
                        left: 0;
                        width: 100%;
                    }

                }
            }
        }

        @media screen and (max-width: 768px) {
            @heightMin: 50px;

            .background-screen-saver {
                .screen-saver-body {
                    .screen-saver-box {
                        .time-wrap {
                            width: 250px;
                            height: @heightMin;

                            .time-value {
                                height: @heightMin;
                                line-height: @heightMin;
                                font-size: @heightMin;
                            }

                            .time-ampm {
                                font-size: 18px;
                                height: @heightMin;
                            }
                        }

                        .date-wrap {
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
</style>
